<!-- 人事-基础设置-合同提醒设置 -->
<template>
  <pageHeaderNew :title="title" :breadCrumb="breadCrumb" showBack>
    <template #buts>
      <a-space>
        <a-button @click="cancel">取消</a-button>
        <a-button type="primary" @click="save">保存</a-button>
      </a-space>
    </template>
  </pageHeaderNew>
  <div class="wrap">
    <div class="reminding">
      <a-space>
        <icon-exclamation-circle
          :size="20"
          :style="{
            color: 'red'
          }"
        />
        <span
          >系统设置员工合同签订、续签提醒时间点，到时间点自动触发提醒给到相关人员。</span
        >
      </a-space>
    </div>

    <div v-for="(item, index) in list" :key="index">
      <a-form :model="list">
        <a-form-item
          field=""
          :label="`${
            index === 0 ? '1、新员工合同签订提醒' : '2、员工合同到期提醒'
          }`"
        >
        </a-form-item>
        <a-form-item field="" label="提醒条件：">
          {{
            index === 0
              ? '新员工在没有签订合同的情况下，触发以下提醒配置'
              : '在员工没有重新签订合同或者变更劳动合同时间的情况下，触发以下提醒配置'
          }}
        </a-form-item>
        <a-form-item field="" label="提醒时间：">
          {{ index === 0 ? '新员工入职' : '员工合同到期' }}
          <a-input-number
            v-model="item.remindTime"
            :style="{
              width: '50px',
              margin: '0 5px'
            }"
            hideButton
            :min="1"
          ></a-input-number>
          天后自动下发信息提醒HR管理人员
        </a-form-item>

        <a-form-item field="" label="提醒频次：">
          <a-input
            placeholder="请输入内容"
            :style="{
              width: '150px',
              marginRight: '5px'
            }"
            v-model="item.remindFrequency.content"
          ></a-input>
          次
          <a-input-number
            v-model="item.remindFrequency.time"
            :style="{
              width: '80px',
              margin: '0 5px'
            }"
            hideButton
            @change="frequencyTimeChange(item)"
          ></a-input-number>
          <a-select
            :style="{
              width: '80px'
            }"
            v-model="item.remindFrequency.unitTime"
          >
            <a-option v-for="item in unitTimeEnum" :key="item">
              {{ item }}
            </a-option>
          </a-select>
          <span style="color: red"
            >（设定几次下面会出现对应次数的设置时间, 最少1次最多3次）</span
          >
        </a-form-item>

        <a-form-item field="" label="频次提醒时间：">
          <div v-for="timeIndex in item.remindFrequency.time" :key="timeIndex">
            <a-time-picker
              style="width: 200px; margin-right: 5px"
              v-model="item.frequencyTime[timeIndex - 1]"
            />
          </div>
        </a-form-item>

        <a-form-item field="" label="提醒人员：">
          <a-select
            :style="{
              width: '200px'
            }"
            v-model="item.remindPeople"
          >
            <a-option> </a-option>
          </a-select>
          <span style="color: red; margin-left: 10px"
            >系统自动提取新员工所在部门与直接上级相应人员信息。</span
          >
        </a-form-item>
        <a-form-item field="" label="提醒方式：">
          <a-checkbox-group v-model="item.remindWay">
            <a-checkbox :value="1">短信提醒</a-checkbox>
            <a-checkbox :value="2">系统信息提醒</a-checkbox>
            <a-checkbox :value="3">邮件提醒</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item field="" label="提醒内容：">
          <a-textarea
            placeholder="请输入内容"
            :maxLength="300"
            :autoSize="{
              minRows: 10
            }"
            :style="{
              width: '500px'
            }"
            allowClear
            showWordLimit
            v-model="item.remark"
          ></a-textarea>
        </a-form-item>
      </a-form>
    </div>

    <div class="content"></div>
  </div>
</template>

<script lang="ts" setup>
const router = useRouter();
const title = '合同签订提醒设置';

const breadCrumb: string[] = [
  '人事',
  '基础设置',
  '信息提醒与预警设置',
  '合同签订提醒设置'
];

const unitTimeEnum = ['天', '小时', '分'];

const list = reactive([
  // 新员工合同
  {
    remindTime: undefined, // 提醒时间
    // 提醒频次
    remindFrequency: {
      content: '', // 内容
      time: undefined, // 几天
      unitTime: '天' // 单位
    },
    frequencyTime: [], // 频次提醒时间
    remindPeople: undefined, // 提醒人员
    remindWay: [], // 提醒方式
    remark: '' // 提醒内容
  },

  // 到期合同
  {
    remindTime: undefined, // 提醒时间
    // 提醒频次
    remindFrequency: {
      content: '', // 内容
      time: undefined, // 几天
      unitTime: '天' // 单位
    },
    frequencyTime: [], // 频次提醒时间
    remindPeople: undefined, // 提醒人员
    remindWay: [], // 提醒方式
    remark: '' // 提醒内容
  }
]);

// 获取数据
const getData = async () => {
  try {
    console.log(1);
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

// 每次修改提醒频次的数字就清空频次提醒时间的数组
const frequencyTimeChange = (item: any) => {
  item.frequencyTime = [];
  console.log(item);
};

// 保存
const save = async () => {
  try {
    console.log(1);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 取消
const cancel = () => {
  router.back();
};
</script>

<style scoped lang="less">
.wrap {
  padding: 10px 20px;

  .reminding {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
